import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/AppLayout.vue'
import IndexView from '@/views/IndexView.vue'
import { useUserStore } from '@/stores/user'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/LoginView.vue')
  },
  {
    path: '/',
    name: 'app-layout',
    meta: { requiresAuth: true, title: '首页' },
    component: AppLayout,
    // children组件路径显示在父组件<RouterView /> 留空处
    children: [
      // 默认页
      {
        path: '',
        name: 'index',
        meta: { title: '默认页' },
        component: IndexView
      },
      {
        path: '/menus',
        name: 'menusIndex',
        meta: { title: '菜单列表' },
        component: () => import('@/views/menu/MenuIndex.vue')
      },
      {
        path: '/create_edit',
        name: 'createEdit',
        meta: { title: '创建菜单' },
        component: () => import('@/views/menu/CreateOrEdit.vue')
      },
      {
        path: '/menus/:id/edit',
        name: 'menu-edit',
        meta: { title: '编辑菜单' },
        component: () => import('@/views/menu/CreateOrEdit.vue')
      },
      // 资源管理
      {
        path: '/resources',
        name: 'resourceIndex',
        meta: { title: '资源分类' },
        component: () => import('@/views/resources/ResourceIndex.vue')
      },
      // 资源类别管理
      {
        path: '/resources-category',
        name: 'resourceCategory',
        meta: { title: '资源列表' },
        component: () => import('@/views/resources/ResourceCategory.vue')
      },
      // 角色管理
      {
        path: '/roles',
        name: 'rolesIndex',
        meta: { title: '角色列表' },
        component: () => import('@/views/role/RolesIndex.vue')
      },
      // 分配菜单
      {
        path: '/roles/:roleId/menus',
        name: 'alloc-menus',
        meta: { title: '分配菜单' },
        props: true, // 为vue文件 props = defineProps({}) 获取路由参数用
        component: () => import('@/views/role/AllocMenus.vue')
      },
      // 分配资源
      {
        path: '/roles/:roleId/resources',
        name: 'alloc-resources',
        meta: { title: '分配资源' },
        props: true,
        component: () => import('@/views/role/AllocResources.vue')
      },
      // 用户管理
      {
        path: '/users',
        name: 'users',
        meta: { title: '用户列表' },
        component: () => import('@/views/users/UserIndex.vue')
      },
      // 课程管理
      {
        path: '/course',
        name: 'course',
        meta: { title: '课程列表' },
        component: () => import('@/views/courses/CoursesIndex.vue')
      },
      // 创建课程
      {
        path: '/course/create',
        name: 'course-create',
        meta: { title: '创建课程' },
        component: () => import('@/views/courses/CreateOrEdit.vue')
      },
      // 编辑课程
      {
        path: '/course/:courseId/edit',
        name: 'course-edit',
        meta: { title: '编辑课程' },
        component: () => import('@/views/courses/CreateOrEdit.vue'),
        props: true
      },
      // 章节课时- 内容管理
      {
        path: '/course/:courseId/content',
        name: 'course-content',
        meta: { title: '章节与课时' },
        component: () => import('@/views/courses/CourseContent.vue'),
        props: true
      },

      // 匹配任何字符 404错误页
      {
        path: '/:xxx(.*)*',
        name: 'ErrorPage',
        component: () => import('@/components/ErrorPage.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some((r) => r.meta?.requiresAuth)) {
    const userStore = useUserStore()
    if (!userStore.token?.access_token) {
      next({ name: 'login', query: { redirect: to.fullPath } })
      return
    }
  }
  next()
})

export default router
